<template>
  <div class="login">
    <img :src="state" alt="">
    <img :src="logo" alt="" class="logo">
    <form action="" name="login" class="">
      <div class="username">
        <span></span>
        <input type="text" placeholder="请输入账号" id="username" name="username">
      </div>
      <div class="password">
        <span></span>
        <input type="password" placeholder="请输入密码" name="password">
      </div>
      <div class="forget">
        <router-link to="/register"> <span>立即注册</span></router-link>
        <span>忘记密码</span>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        state: require('../assets/imgs/state.png'),
        logo:require('../assets/imgs/login/logo.png')
      }
    }
  }
</script>

<style scoped lang="less">
.login{
  background-color: rgba(24, 24, 24, 1);
  width: 100%;
  height: 100%;
  img{
    width: 100%;
    text-align: center;
  }
  .logo{
    width: 150px;
    /*margin-left:120px;*/
    margin-top: 100px;
  }
  form{
    margin-top: 75px;
    padding:0 60px;
    button{
      color: #171818;
      background-color: #FEDA05;
      width: 100%;
      height: 33px;
      border-bottom-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      border-top-left-radius: 15px;
      border: none;
      margin-top: 35px;
      outline: none;
    }
  }
  .username,.password{
    width: 250px;
    height: 35px;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 8px;
    /*margin-left: 60px;*/
    margin-top: 10px;
    span{
      width: 40px;
      height: 33px;
      background: url("../assets/imgs/login/username.png");
      background-size: cover;
      background-position: 0 0;
      display: block;
      float: left;
      margin-left: -5px;
    }
    input{
      padding-top: 2px;
      font-size: 16px;
      outline: none;
      width: 200px;
      height: 33px;
      color: #FFFFFF;
      border: none;
      background-color: transparent !important;
    }
    input::placeholder{
      color: #FFFFFF;
      letter-spacing: 4px;
      font-family: "微软雅黑 Light";
      font-size: 16px;
    }
  }
  .password{
    span{
      width: 40px;
      height: 33px;
      background: url("../assets/imgs/login/password.png");
      background-size: cover;
      background-position: 0 0;
      display: block;
      float: left;
    }
  }
  .forget{
    padding-top: 10px;
    font-size: 12px;
    span:nth-child(1){
      float: left;
      color: #FFFFFF;
    }
    span:nth-child(2){
      float: right;
      color: #FFFFFF;
    }
  }
}
</style>
